How would you store and retrieve JSON data in IndexedDB?

Question

ICSM Computer · Answer

Storing and retrieving JSON data in IndexedDB is straightforward because IndexedDB can store
JavaScript objects directly — including parsed JSON objects.
Step-by-Step: Store and Retrieve JSON in IndexedDB
1. Store JSON Data
Let’s say you have a JSON object:
const jsonData = {
    id: 1,
    name: "John Doe",
    email: "john@example.com",
    skills: ["JS", "CSS", "HTML"]
};
You can store it directly:
function storeJsonData(db, storeName, data) {
    return new Promise((resolve, reject) =andgt; {
        const tx = db.transaction(storeName, 'readwrite');
        const store = tx.objectStore(storeName);
        const request = store.put(data); // `put` will add or update based on keyPath
        request.onsuccess = () =andgt; resolve(request.result);
        request.onerror = (e) =andgt; reject(`Store error: ${e.target.errorCode}`);
    });
}
2. Retrieve JSON Data
function getJsonData(db, storeName, id) {
    return new Promise((resolve, reject) =andgt; {
        const tx = db.transaction(storeName, 'readonly');
        const store = tx.objectStore(storeName);
        const request = store.get(id);
        request.onsuccess = () =andgt; resolve(request.result);
        request.onerror = (e) =andgt; reject(`Get error: ${e.target.errorCode}`);
    });
}
3. Full Example with Usage
(async () =andgt; {
    const dbName = "JsonDB";
    const storeName = "Users";
    const jsonData = {
        id: 1,
        name: "John Doe",
        email: "john@example.com",
        skills: ["JS", "CSS", "HTML"]
    };
    // Open DB
    const db = await new Promise((resolve, reject) =andgt; {
        const request = indexedDB.open(dbName, 1);
        request.onupgradeneeded = (event) =andgt; {
            const db = event.target.result;
            if (!db.objectStoreNames.contains(storeName)) {
                db.createObjectStore(storeName, { keyPath: 'id' });
            }
        };
        request.onsuccess = () =andgt; resolve(request.result);
        request.onerror = (e) =andgt; reject(`DB open error: ${e.target.errorCode}`);
    });
    // Store JSON
    await storeJsonData(db, storeName, jsonData);
    console.log("Stored JSON data");
    // Retrieve JSON
    const stored = await getJsonData(db, storeName, 1);
    console.log("Retrieved JSON data:", stored);
})();
Optional: Store Raw JSON as String
If you prefer to store raw JSON strings instead of parsed objects:
const rawJson = JSON.stringify(jsonData);
store.put({ id: 1, json: rawJson });
.and later:
const result = await getJsonData(db, storeName, 1);
const parsed = JSON.parse(result.json);
Summary
You can store plain JavaScript objects (parsed JSON).Use put() to insert/update, and get() to retrieve.JSON strings can also be stored if needed — just serialize with JSON.stringify().

interview

How would you store and retrieve JSON data in IndexedDB?

ICSM Computer

Can you answer this question?

1 Answers

Step-by-Step: Store & Retrieve JSON in IndexedDB

1. Store JSON Data

2. Retrieve JSON Data

3. Full Example with Usage

Optional: Store Raw JSON as String

Summary

Liked By